

const watermark = {};
const defaultSettings = {
    watermark_id: 'wm_div_id',
    watermark_prefix: 'mask_div_id',
    watermark_txt: "添加水印",
    watermark_x: 20,
    watermark_y: 20,
    watermark_rows: 0,
    watermark_cols: 0,
    watermark_x_space: 0,  //水印x轴间隔
    watermark_y_space: 0,  //水印y轴间隔
    watermark_font: '微软雅黑',
    watermark_color: 'black',
    watermark_fontsize: '12px',
    watermark_alpha: 0.1,   //透明度
    watermark_width: 100,   //水印宽度
    watermark_height: 100,  //水印高度
    watermark_angle: 20,    //水印角度
    watermark_parent_width: 0,
    watermark_parent_height: 0,
    watermark_parent_node: null,
};


const loadMark = function (settings) {
    let watermark_element = document.getElementById(defaultSettings.watermark_id);
    watermark_element && watermark_element.parentNode && watermark_element.parentNode.removeChild(watermark_element);
    let watermark_parent_element = document.getElementById(defaultSettings.watermark_parent_node);
    let watermark_hook_element = watermark_parent_element ? watermark_parent_element : document.body;
    let page_width = Math.max(watermark_hook_element.scrollWidth, watermark_hook_element.clientWidth);
    let page_height = Math.max(watermark_hook_element.scrollHeight, watermark_hook_element.clientHeight);
    let setting = arguments[0] || {};
    let parentEle = watermark_hook_element;
    let page_offsetTop = 0;
    let page_offsetLeft = 0;
    if (setting.watermark_parent_width || setting.watermark_parent_height) {
        if (parentEle) {
            page_offsetTop = parentEle.offsetTop || 0;
            page_offsetLeft = parentEle.offsetLeft || 0;
            defaultSettings.watermark_x = defaultSettings.watermark_x + page_offsetLeft;
            defaultSettings.watermark_y = defaultSettings.watermark_y + page_offsetTop
        }
    } else {
        if (parentEle) {
            page_offsetTop = parentEle.offsetTop || 0;
            page_offsetLeft = parentEle.offsetLeft || 0
        }
    }
    let otdiv = document.getElementById(defaultSettings.watermark_id);
    let shadowRoot = null;
    if (!otdiv) {
        otdiv = document.createElement('div');
        otdiv.id = defaultSettings.watermark_id;
        otdiv.setAttribute('style', 'pointer-events: none !important; display: block !important');
        if (typeof otdiv.attachShadow === 'function') {
            shadowRoot = otdiv.attachShadow({
                mode: 'open'
            })
        } else {
            shadowRoot = otdiv
        }
        let nodeList = watermark_hook_element.children;
        let index = Math.floor(Math.random() * (nodeList.length - 1));
        if (nodeList[index]) {
            watermark_hook_element.insertBefore(otdiv, nodeList[index])
        } else {
            watermark_hook_element.appendChild(otdiv)
        }
    } else if (otdiv.shadowRoot) {
        shadowRoot = otdiv.shadowRoot
    }
    defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
    let temp_watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols));
    defaultSettings.watermark_x_space = temp_watermark_x_space ? defaultSettings.watermark_x_space : temp_watermark_x_space;
    let allWatermarkWidth;
    defaultSettings.watermark_rows = parseInt((page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
    let temp_watermark_y_space = parseInt((page_height - defaultSettings.watermark_y - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows));
    defaultSettings.watermark_y_space = temp_watermark_y_space ? defaultSettings.watermark_y_space : temp_watermark_y_space;
    let allWatermarkHeight;
    if (watermark_parent_element) {
        allWatermarkWidth = defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1);
        allWatermarkHeight = defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1);
    } else {
        allWatermarkWidth = page_offsetLeft + defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1);
        allWatermarkHeight = page_offsetTop + defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1);
    }

    // 添加水印文字
    let x;
    let y;
    for (let i = 0; i < defaultSettings.watermark_rows; i++) {
        if (watermark_parent_element) {
            y = page_offsetTop + defaultSettings.watermark_y + (page_height - allWatermarkHeight) / 2 + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
        } else {
            y = defaultSettings.watermark_y + (page_height - allWatermarkHeight) / 2 + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i
        }
        for (let j = 0; j < defaultSettings.watermark_cols; j++) {
            if (watermark_parent_element) {
                x = page_offsetLeft + defaultSettings.watermark_x + (page_width - allWatermarkWidth) / 2 + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
            } else {
                x = defaultSettings.watermark_x + (page_width - allWatermarkWidth) / 2 + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j
            }
            let mask_div = document.createElement('div');
            let oText = document.createTextNode(defaultSettings.watermark_txt);
            mask_div.appendChild(oText);
            mask_div.id = defaultSettings.watermark_prefix + i + j;
            mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
            mask_div.style.visibility = "";
            mask_div.style.position = "absolute";
            mask_div.style.left = x + 'px';
            mask_div.style.top = y + 'px';
            mask_div.style.overflow = "hidden";
            mask_div.style.zIndex = "9999999";
            mask_div.style.opacity = defaultSettings.watermark_alpha;
            mask_div.style.fontSize = defaultSettings.watermark_fontsize;
            mask_div.style.fontFamily = defaultSettings.watermark_font;
            mask_div.style.color = defaultSettings.watermark_color;
            mask_div.style.textAlign = "center";
            mask_div.style.width = defaultSettings.watermark_width + 'px';
            mask_div.style.height = defaultSettings.watermark_height + 'px';
            mask_div.style.display = "block";
            mask_div.style['-ms-user-select'] = "none";
            shadowRoot.appendChild(mask_div)
        }
    }
};


const removeMark = function() {
    let watermark_element = document.getElementById(defaultSettings.watermark_id);
    let _parentElement = watermark_element.parentNode;
    _parentElement.removeChild(watermark_element)
};


watermark.init = function(settings) {
    loadMark(settings);
    window.addEventListener('onload', function() {
        loadMark(settings)
    });
    window.addEventListener('resize', function() {
        loadMark(settings)
    })
};

watermark.load = function(settings) {
    loadMark(settings)
};

watermark.remove = function() {
    removeMark()
};

export default watermark
